<template>
    <div style="display: flex">
        <el-button type="primary" style="margin-right: 15px  " @click="addItem">新增</el-button>
        <el-input v-model="search" placeholder="请输入课程名称"
            style="width: 200px;height: 33px;margin-right: 15px;font-size: 15px;" clearable></el-input>
        <!--对应按键-->
        <el-button type="primary" style="color: #fff;font-size: 12px;background-color: #1890ff;" @click="load">搜索
        </el-button>
    </div>

    <!-- 表格 -->
    <div>
        <el-table :data="tableData" :row-style="{ height: '77px' }" border
            style="width: calc(100vw - 240px);height: 75vh;margin-top: 20px;font-size: 15px;">
            <el-table-column fixed prop="courseName" label="课程名称" align="center" min-width="150"
                show-overflow-tooltip />
            <el-table-column prop="name" label="试卷名称" align="center" min-width="180" show-overflow-tooltip />
            <el-table-column prop="exampaperNum" label="试题数量" align="center" min-width="120" />
            <el-table-column prop="exampaperDate" label="考试时长(分钟)" align="center" min-width="120" />
            <el-table-column prop="exampaperAllScore" label="总分" align="center" min-width="100" />
            <el-table-column prop="exampaperPassScore" label="及格分" align="center" min-width="100" />
            <el-table-column prop="createTime" label="创建时间" align="center" min-width="200" />
            <el-table-column fixed="right" label="操作" align="center" width="270" class-name="fixed-column">
                <template v-slot="scope">
                    <!--<el-button type="primary" size="small" icon="Edit" @click="editItem(scope.row)">编辑-->
                    <!--</el-button>-->
                    <el-button type="primary" size="small" icon="View" @click="goToAbout(scope.row.id)">详情</el-button>
                    <el-button type="danger" size="small" icon="Delete" @click="deleteItem(scope.row.id)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 分页区域 -->
    <div style="margin: 10px 0">
        <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper" :total="total" :background="true"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

    <!--编辑弹窗表-->
    <el-dialog :close-on-click-modal="false" title="考试操作" v-model="dialogVisible" width="560" @close="reset('form')">
        <el-form label-position="top" :inline="true" :model="form" ref="form" :rules="rules">
            <el-form-item label="试卷数量" prop="count">
                <el-input v-model="form.count" placeholder="请输入试卷数量" autocomplete="off"
                    oninput="this.value = this.value.replace(/[^0-9]/g, '')" clearable></el-input>
            </el-form-item>
            <el-form-item label="试卷名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入试卷名称" autocomplete="off" clearable></el-input>
            </el-form-item>
            <el-form-item label="课程名称" prop="courseId">
                <el-select v-model="form.courseId" filterable clearable placeholder="请选择课程名称" style="width: 185px">
                    <el-option v-for="item in courseOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="试题数量" prop="exampaperNum">
                <el-select v-model="form.exampaperNum" clearable placeholder="请选择试题数量" style="width: 185px">
                    <el-option v-for="item in exampaperNumOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="及格分数" prop="exampaperPassScore">
                <el-input v-model="form.exampaperPassScore" placeholder="请输入及格分数" autocomplete="off"
                    oninput="this.value = this.value.replace(/[^0-9.]/g, '')" clearable></el-input>
            </el-form-item>
            <el-form-item label="考试时长" prop="exampaperDate">
                <el-input v-model="form.exampaperDate" placeholder="请输入考试时长(分钟)" autocomplete="off"
                          oninput="this.value = this.value.replace(/[^0-9]/g, '')" clearable></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="reset('form')">取消</el-button>
            <el-button type="primary" @click="submitForm('form')">保存</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { ref } from 'vue';
import request from "~/utils/request.js";
import { ElMessage } from "element-plus";

export default {
    data() {
        return {
            dialogVisible: false,
            tableData: [],
            form: {
                count: 1,
            },
            search: '',
            courseOptions: [],
            exampaperNumOptions: [
                {
                    value: 20,
                    label: 20
                }, {
                    value: 25,
                    label: 25
                }, {
                    value: 50,
                    label: 50
                }
            ],
            selectOptionName: '',
            currentPage: 1,
            pageSize: 10,
            total: 0,
            rules: {
                count: [
                    { required: true, message: '试卷数量不能为空', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入试卷名称', trigger: 'blur' },
                ],
                courseId: [
                    { required: true, message: '请选择课程名称', trigger: 'blur' },
                ],
                exampaperNum: [
                    { required: true, message: '请选择试题数量', trigger: 'blur' },
                ],
                exampaperPassScore: [
                    { required: true, message: '请输入及格分数', trigger: 'blur' },
                ],
                exampaperDate: [
                    { required: true, message: '请输入考试时长', trigger: 'blur' },
                ],
            }
        }
    },
    async created() {
        await this.getCourseOptions()
        await this.load()
    },
    methods: {
        async load() {
            request.get("/exampaper/pageAdmin?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize + "&courseName=" + this.search).then(res => {
                if (res.code === '200') {
                    for (let key in res.data) {
                        if (key === "records") {
                            this.tableData = res.data[key];
                        } else if (key === "total") {
                            this.total = res.data[key];
                        }
                    }
                } else {
                    ElMessage.error("错误" + res.msg)
                }
            })
        },
        async getCourseOptions() {
            request.get("/course/all").then(res => {
                this.courseOptions = res.data
            })
        },
        goToAbout(scope) {
            this.$router.push({ path: "/exam/questionDetail", query: { examId: scope } });
        },
        editItem(item) {
            Object.assign(this.form, item)
            this.dialogVisible = true
        },
        addItem() {
            this.dialogVisible = true;
        },
        // 删除
        deleteItem(scope) {
            this.$confirm('是否确定删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request.get("/exampaper/delete/" + scope).then(res => {
                    if (res.code === '200') {
                        this.$message.success("成功")
                        this.load()
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            });
        },
        // 提交
        submitForm(val) {
            this.$refs[val].validate((valid) => {
                if (valid) {
                    request.post("/exampaper/edit", this.form).then(res => {
                        if (res.code === '200') {
                            this.$message({
                                message: "成功",
                                type: "success"
                            })
                            this.load()
                            this.reset(val)
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                }
            })
        },
        // 取消
        reset(val) {
            this.dialogVisible = false;
            this.form = {};
            this.$refs[val].resetFields();
        },
        handleCurrentChange(item) {
            // 改变当前页码触发
            this.currentPage = item
            this.load()
        },
        handleSizeChange(item) {   // 改变当前每页的个数触发
            this.pageSize = item
            this.load()
        },
    }
}
</script>

<style scoped>
.fixed-column {
    position: sticky;
    right: 0;
    background: white;
    z-index: 1;
}

.hide-header-checkbox :deep(.el-table__header) .el-checkbox {
    display: none;
}

.el-table .cell {
    text-align: center;
}

.el-table__row {
    height: 50px;
}

/* 新增表头下拉框样式 */
.el-table .el-select {
    width: 100%;
}

.el-table .el-select :deep(.el-input__inner) {
    border: none;
    padding-left: 0;
}

/* 确保禁用状态样式生效 */
.el-input-number.is-disabled {
    cursor: not-allowed;
}

.el-input-number.is-disabled :deep(.el-input__wrapper) {
    background-color: var(--el-disabled-bg-color);
}

/* 新增智能组卷按钮样式 */
.el-button--success {
    background-color: #67c23a;
    border-color: #67c23a;
}

.el-button--success:hover {
    background-color: #85ce61;
    border-color: #85ce61;
}

.question-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.question-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    padding: 16px;
    border-left: 4px solid #409EFF;
}

.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ebeef5;
}

.question-type {
    font-weight: 600;
    color: #409EFF;
    font-size: 15px;
}

.question-score {
    color: #67C23A;
    margin-left: 8px;
    font-size: 14px;
}

.question-title {
    font-size: 14px;
    line-height: 1.6;
    color: #606266;
    margin-bottom: 12px;
}

.answer-section {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.answer-label {
    color: #909399;
    margin-right: 8px;
    font-size: 13px;
}

.options-section {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 12px;
    margin-top: 12px;
}

.options-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.option-item {
    display: flex;
    align-items: center;
    position: relative;
    padding: 8px;
    background: #f5f7fa;
    border-radius: 4px;
}

.option-char {
    font-weight: 500;
    color: #409EFF;
    margin-right: 8px;
}

.option-text {
    flex: 1;
    color: #606266;
}

.correct-icon {
    margin-left: 8px;
    font-size: 14px;
}

.correct-options {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #ebeef5;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #909399;
}

.correct-tag {
    margin-left: 8px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .options-list {
        grid-template-columns: 1fr;
    }

    .question-card {
        padding: 12px;
    }
}
</style>
